<template>
    <div>
        <ViewLog ref="view_log" />
        <!-- <ClearPlan ref="clear_ref" @getDataList="getDataList" /> -->
        <PassForm ref="pass_ref" :queryInfo="queryInfo" @getDataList="getDataList" />
        <div class="com_box">
            <div class="com_tab_content flexbox flexcenter flexbetween">
                <div class="com_tab_box flexbox flexcenter">
                    <div class="com_tab_item" @click="selectTab(item)" :class="{'active':item.id==queryInfo.types}" v-for="item in tabList" :key="item.id">{{item.nickname}}</div>
                </div>
                <!-- <el-button type="primary" size="small" style="margin-left:12px" @click="clearPlan()" v-if="queryInfo.types==1 || queryInfo.types==2">
                    <div class="flexbox flexcenter flexjust">
                        <svg width="14" height="14" viewBox="0 0 14 14" fill="none" class="btn_svg" xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd" clip-rule="evenodd" d="M1.1665 3.79167H5.24984V1.75H8.74984V3.79167H12.8332V7H12.0166V12.25C12.0166 12.4433 11.8599 12.6 11.6666 12.6H4.67366C4.67128 12.6 4.6689 12.6001 4.6665 12.6001C4.66411 12.6001 4.66173 12.6 4.65934 12.6H2.33331C2.14001 12.6 1.98331 12.4433 1.98331 12.25V7H1.1665V3.79167ZM5.0165 11.9V9.3334C5.0165 9.1401 4.8598 8.9834 4.6665 8.9834C4.4732 8.9834 4.3165 9.1401 4.3165 9.3334V11.9H2.68331V7.35H11.3166V11.9H5.0165Z" fill="white" />
                        </svg>
                        清除计划
                    </div>
                </el-button> -->
            </div>
            <div class="sch_rank">
                <div class="flexbox flexcenter flexbetween">
                    <div class="flexbox flexcenter">
                        <div class="reset_btn" @click="resetFun">重置</div>
                        <div class="rank_line"></div>
                        <img src="../../assets/img/down_icon.svg" alt="" class="rank_down" :class="{'rank_up':!showrank}" @click="showrank = !showrank">
                    </div>
                </div>
            </div>
            <div class="sch_hight flexbox" v-if="showrank">
                <div class="flexbox flexcenter flex">
                    <template v-if="queryInfo.types==0">
                        <el-dropdown :hide-on-click="false" trigger="click" placement='bottom'>
                            <div class="flexbox flexcenter drop_box drop_hover">
                                <span class="drop_text">审核状态</span>
                                <span class="drop_title">{{queryInfo.examine !==''?repeatSinge(examineList,queryInfo.examine,'id','nickname'):'全部'}}</span>
                                <span class="el-icon-caret-bottom"></span>
                            </div>
                            <el-dropdown-menu slot="dropdown">
                                <div class="dropdown_hascheck flexbox flexcenter">
                                    <span class="hascheck_num" :class="{'hascheck_num_color':queryInfo.examine !==''}">已选 {{queryInfo.examine !==''?'1':'0'}} 项</span>
                                    <div class="rank_line" style="margin:0 10px"></div>
                                    <el-link type="primary" :underline="false" @click="clearQuery('examine',2)" v-if="queryInfo.examine !==''">清除已选</el-link>
                                </div>
                                <el-radio-group v-model="queryInfo.examine" class="check_style" @change="getDataList(1)">
                                    <el-radio :label="item.id" v-for="(item,index) in examineList" :key="index">
                                        <span class="el_check_title">{{item.nickname}}</span>
                                        <span class="el-icon-check el_check_icon"></span>
                                    </el-radio>
                                </el-radio-group>
                            </el-dropdown-menu>
                        </el-dropdown>
                        <div class="rank_line" style="margin-right:12px"></div>
                    </template>
                    <template v-if="queryInfo.types==1 || queryInfo.types==2">
                        <el-dropdown :hide-on-click="false" trigger="click" placement='bottom'>
                            <div class="flexbox flexcenter drop_box drop_hover">
                                <span class="drop_text">评分状态</span>
                                <span class="drop_title">{{queryInfo.status !==''?repeatSinge(statusList,queryInfo.status,'id','nickname'):'全部'}}</span>
                                <span class="el-icon-caret-bottom"></span>
                            </div>
                            <el-dropdown-menu slot="dropdown">
                                <div class="dropdown_hascheck flexbox flexcenter">
                                    <span class="hascheck_num" :class="{'hascheck_num_color':queryInfo.status !==''}">已选 {{queryInfo.status !==''?'1':'0'}} 项</span>
                                    <div class="rank_line" style="margin:0 10px"></div>
                                    <el-link type="primary" :underline="false" @click="clearQuery('status',2)" v-if="queryInfo.status !==''">清除已选</el-link>
                                </div>
                                <el-radio-group v-model="queryInfo.status" class="check_style" @change="getDataList(1)">
                                    <el-radio :label="item.id" v-for="(item,index) in statusList" :key="index">
                                        <span class="el_check_title">{{item.nickname}}</span>
                                        <span class="el-icon-check el_check_icon"></span>
                                    </el-radio>
                                </el-radio-group>
                            </el-dropdown-menu>
                        </el-dropdown>
                        <div class="rank_line" style="margin-right:12px"></div>
                    </template>
                    <el-input style="width:200px" clearable size="small" placeholder="素材名称、素材 ID" suffix-icon="el-icon-search" @change="getDataList(1)" v-model="queryInfo.query">
                    </el-input>
                    <span class="font_14 color_02" style="margin:0 12px">上新时间</span>
                    <el-date-picker style="width:240px" value-format="yyyy-MM-dd" v-model="queryInfo.create_time" @change="getDataList(1)" size="small" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期">
                    </el-date-picker>
                    <span class="font_14 color_02" style="margin:0 12px">评分时间</span>
                    <el-date-picker style="width:240px" value-format="yyyy-MM-dd" v-model="queryInfo.score_time" @change="getDataList(1)" size="small" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期">
                    </el-date-picker>
                </div>
            </div>
        </div>

        <div class="w_bg bd" style="margin-top:12px" v-loading="loading" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)">
            <div class="strategy_head flexbox flexcenter flexbetween">
                <div class="font_16 color_01">
                    {{$route.query.name}}
                </div>
                <div class="flexbox flexcenter opm_now" v-if="queryInfo.types==1">
                    当前执勤优化师
                    <div class="opt_line"></div>
                    <template v-if="JSON.parse($route.query.one).length>0">
                        <div class="opm_item flexbox flexcenter" v-for="item in JSON.parse($route.query.one)" :key="item">
                            <div class="opm_head">{{ item | keepOneNumS}}</div>
                            {{item}}
                        </div>
                    </template>
                    <template v-else>
                        <div class="opm_item flexbox flexcenter">
                            暂无
                        </div>
                    </template>
                </div>
                <div class="flexbox flexcenter opm_now" v-else-if="queryInfo.types==2">
                    当前执勤优化师
                    <div class="opt_line"></div>
                    <template v-if="JSON.parse($route.query.two).length>0">
                        <div class="opm_item flexbox flexcenter" v-for="item in JSON.parse($route.query.two)" :key="item">
                            <div class="opm_head">{{ item | keepOneNumS}}</div>
                            {{item}}
                        </div>
                    </template>
                    <template v-else>
                        <div class="opm_item flexbox flexcenter">
                            暂无
                        </div>
                    </template>
                </div>
            </div>
            <DsTable :tableData="tableData" @getDataList="getDataList" @passData2="passData2" v-if="queryInfo.types==0" key="0" />
            <OneTable :tableData="tableData" :queryInfo="queryInfo" @getDataList="getDataList" @viewLog="viewLog" v-else-if="queryInfo.types==1" key="1" />
            <TwoTable :tableData="tableData" :queryInfo="queryInfo" @getDataList="getDataList" @viewLog="viewLog" v-else-if="queryInfo.types==2" key="2" />
            <HzTable :tableData="tableData" :queryInfo="queryInfo" @getDataList="getDataList" v-else-if="queryInfo.types==3" key="3" />
            <div class="page_box flexbox flexcenter">
                <el-pagination background layout="total, prev, pager, next,sizes" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.page" :page-size="queryInfo.limit" :page-sizes="[20, 50, 100, 200]" :total="total">
                </el-pagination>
            </div>
        </div>

    </div>
</template>

<script>
import DsTable from "./DsTable";
import OneTable from "./OneTable";
import TwoTable from "./TwoTable";
import HzTable from "./HzTable";
import ViewLog from "./ViewLog";
// import ClearPlan from "./ClearPlan";
import PassForm from "./PassForm";
export default {
    components: {
        DsTable,
        OneTable,
        TwoTable,
        HzTable,
        ViewLog,
        // ClearPlan,
        PassForm
    },
    name: "",
    data() {
        return {
            showrank: true,
            loading: false,
            queryInfo: {
                page: 1,
                limit: 20,
                id: null,
                query: "",
                types: 0,
                examine: "",
                status: "",
                orderfield: "",
                ordertype: "",
                create_time:[],
                score_time:[],
            },
            tabList: [
                {
                    id: 0,
                    nickname: "待审素材",
                },
                {
                    id: 1,
                    nickname: "一阶测试",
                },
                {
                    id: 2,
                    nickname: "二阶测试",
                },
                {
                    id: 3,
                    nickname: "汇总数据",
                },
            ],
            examineList: [
                {
                    id: 0,
                    nickname: "待审核",
                },
                {
                    id: 1,
                    nickname: "审核通过",
                },
                {
                    id: -1,
                    nickname: "未通过",
                },
            ],
            statusList: [
                {
                    id: 0,
                    nickname: "待测试",
                },
                {
                    id: -1,
                    nickname: "淘汰",
                },
                {
                    id: 1,
                    nickname: "S级",
                },
                {
                    id: 2,
                    nickname: "A级",
                },
                {
                    id: 3,
                    nickname: "待复测",
                },
                {
                    id: 5,
                    nickname: "复测中",
                },
                {
                    id: -2,
                    nickname: "客户卡审",
                },
            ],
            total: 1,
            setpage: 1,
            tableData: [],
        };
    },
    created() {
        this.queryInfo.id = this.$route.query.id;
        this.getDataList(1);
    },
    methods: {
        selectTab(item) {
            this.tableData = [];
            this.queryInfo.types = item.id;
            this.resetFun();
        },
        //获取列表
        async getDataList(page) {
            this.queryInfo.page = page;
            this.loading = true;
            const { data: res } = await this.$http.post(
                "videotest/Probject/materialList",
                this.queryInfo
            );
            if (res.code !== 200) {
                this.loading = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.loading = false;
                this.tableData = res.data.list;
                this.total = res.data.count;
            }
        },

        // 查看日志
        viewLog(row) {
            this.$refs.view_log.getData(row);
        },

        // 清除计划
        clearPlan() {
            this.$refs.clear_ref.getData(this.queryInfo.types);
        },

        // 创建失败通过
        passData2(id) {
            this.$refs.pass_ref.getData(id);
        },

        // 单选
        repeatSinge(a, b, id, name) {
            let text = a
                .filter((item) => {
                    return item[id] == b;
                })
                .map((item) => {
                    return item[name];
                })
                .toString();
            return text;
        },

        // 多选
        repeatFind(b, a, id, name) {
            let arr = [];
            for (let i in b) {
                for (let o in a) {
                    if (b[i] == a[o][id]) {
                        arr.push(a[o][name]);
                    }
                }
            }
            return arr.toString();
        },

        // 清空筛选
        clearQuery(name, type) {
            if (type == 1) {
                this.queryInfo[name] = [];
            } else {
                this.queryInfo[name] = "";
            }
            this.getDataList(1);
        },

        // 重置
        resetFun() {
            this.queryInfo.query = "";
            this.queryInfo.examine = "";
            this.queryInfo.status = "";
            this.queryInfo.orderfield = "";
            this.queryInfo.ordertype = "";
            this.getDataList(1);
        },

        // 每页显示多少条数据
        handleSizeChange(val) {
            this.queryInfo.limit = val;
            this.getDataList(1);
        },
        // 当前页切换
        handleCurrentChange(val) {
            this.setpage = val;
            this.getDataList(val);
        },
    },
};
</script>


<style scoped>
.reset_btn {
    margin: 0 12px;
    margin-left: 0;
}
</style>


